<template>
    <div class="settle-sub-box card-box">
        <div class="upload-box">
            <div class="title">请上传本人人面像身份证照片</div>
            <div class="box">
                <div class="upload">
                    <el-image
                        fit="contain"
                        src="../../static/images/cardIdPositive.png"
                        @click="chooseImage('positive')"
                        class="uploadimg">
                        <div slot="placeholder" class="image-slot">
                            <i class="el-icon-loading"></i>
                        </div>
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                    <el-image
                        fit="contain"
                        v-if="positive&&positive.url"
                        :src="'/_api' + positive.url"
                        class="img-box"
                        @load="loadImage()"
                        preview>
                        <div slot="placeholder" class="image-slot">
                            <i class="el-icon-loading"></i>
                        </div>
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                    <span v-if="positive.url" @click="clearImg('positive')" class="iconClear"><i
                        class="el-icon-error"></i></span>
                </div>
            </div>
        </div>
        <div class="info">
            <div>
                <div class="label">姓名</div>
                <div>{{idCardMessage.name}}</div>
            </div>
            <div>
                <div class="label">住址</div>
                <div>
                    {{idCardMessage.address}}
                </div>
            </div>
            <div>
                <div class="label">身份证号</div>
                <div>{{idCardMessage.idnumber}}</div>
            </div>
        </div>
        <div class="paragraph">请上传清晰、完整的身份证照片，保证系统精准识别身份证信息，若信息不对，请重新上传</div>
        <el-button-group class="submit clearfix">
            <el-button type="primary"
                       :disabled="!idCardMessage.name||!idCardMessage.address||!idCardMessage.idnumber" @click="submit">
                确定
            </el-button>
        </el-button-group>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                idCardMessage: {}, // 身份证信息
                positive: {},
                reverse: {},
                previewState: false,
                previewBox: null
            }
        },
        mounted() {
            let _this = this
            this.$method.wxConfig()
            this.$preview.on('imageLoadComplete', (e, item) => {
                    _this.previewState = true
                    let _preview = this.$preview.self
                    this.previewBox = _preview
                    _preview.listen('close', () => {
                        _this.previewState = false
                    })
                }
            )
        },
        methods: {
            // 身份证上传相关
            parseIdCard(id) {
                this.$http.get('/healthcode/parseIdCard?fileId=' + id).then(result => {
                    if (result.success) {
                        let message = result.data.response[0], newMessage,
                            objectFilter = this.$filter.objectFilter()
                        newMessage = objectFilter(message, value => value)
                        this.idCardMessage = {...this.idCardMessage, ...newMessage}
                        this.idCardMessage.uuid = id
                    }
                })
            },
            loadImage() {
                this.$nextTick(() => {
                    this.$previewRefresh()
                })
            },
            clearImg(type) {
                if (type === 'positive') {
                    this.positive = {}
                    this.idCardMessage.name = ''
                    this.idCardMessage.idnumber = ''
                    this.idCardMessage.address = ''
                } else {
                    this.fileListReverse = []
                    this.reverse = {}
                    this.idCardMessage.effective_date = ''
                    this.idCardMessage.expire_date = ''
                    this.idCardMessage.issuer = ''
                }
            },
            submit() {
                this.$emit('updateInfo', 'idCardMessage', this.idCardMessage)
                history.back()
            },

            // 微信图片上传
            chooseImage(type) {
                let _this = this

                this.$wechat.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {
                        _this.getLocalImgData(res.localIds[0], type)
                        _this.$vux.loading.show()
                    }
                })
            },
            getLocalImgData(localId, type) {
                let _this = this
                this.$wechat.getLocalImgData({
                    localId: localId, // 图片的本地ID
                    success: (res) => {
                        var localData = res.localData // localData是图片的base64数据，可以用img标签显示
                        if (localData.indexOf('data:image') !== 0) {
                            localData = 'data:image/jpg;base64,' + localData
                        }
                        let form = document.imgForm,
                            formData = new FormData(form),
                            fileName = new Date().getTime() + '.jpg'
                        formData.append('file', _this.$filter.dataURLtoFile(localData, fileName))
                        _this.fileUpload(formData, type)
                    },
                    fail: function () {
                        _this.$vux.loading.hide()
                    }
                })
            },
            fileUpload(formData, type) {
                this.$vux.loading.show()
                this.$nextTick(() => {
                    this.$http.post('/file/upload?type=idcard',
                        formData,
                        {headers: {'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryU9T56J8eIqTBGRQH'}}
                    ).then(result => {
                        if (result.success) {
                            this.$vux.loading.hide()
                            if (type === 'positive') {
                                // 身份证正面
                                this.positive = result.data
                            } else {
                                // 身份证反面
                                this.reverse = result.data
                            }
                            this.parseIdCard(result.data.uuid)
                            this.$nextTick(() => {
                                this.$previewRefresh()
                            })
                        }
                    }).catch(() => {
                        this.$vux.loading.hide()
                    })
                })
            }
        },
        components: {},
        beforeRouteLeave(to, from, next) {
            let _this = this
            if (_this.previewState) {
                _this.previewBox.close()
                next(false)
            } else {
                next()
            }
        }
    }
</script>

<style scoped lang="less">
    .card-box {
        background-color: #f4f4f4;

        .title {
            line-height: .76rem;
            padding: 0 .2rem;
            color: #999;
        }

        .upload-box {
            padding-bottom: .3rem;
            background-color: #fff;

            .title {
                color: #333;
            }

            .box {
                display: flex;
                width: 100%;

                .upload {
                    position: relative;
                    overflow: hidden;
                    height: 56vw;
                    border-radius: .2rem;
                    flex: 1;
                    padding: 0 .2rem;

                    > div {
                        width: 100%;
                        height: 100%;
                    }

                    .el-upload, .uploadimg {
                        width: 100%;
                        height: 100%;
                    }

                    .img-box {
                        position: absolute;
                        left: 0;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        width: 100%;
                        height: 100%;
                        background-color: #fff;
                        padding: 0 .2rem;
                    }

                    .iconClear {
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: .72rem;
                        height: .72rem;
                        line-height: .72rem;
                        text-align: center;

                        i {
                            font-size: .4rem;
                            color: #999;
                        }
                    }
                }
            }
        }

        .paragraph {
            padding: .2rem .5rem;
            color: #ACB4C9;
        }

        .info {
            margin-top: .2rem;
            padding: .2rem;
            background-color: #fff;

            > div {
                min-height: .48rem;
                line-height: .48rem;
                margin: .1rem 0;
                overflow: hidden;

                .label {
                    float: left;
                    width: 1.6rem;
                    color: #999;
                }

                .label + div {
                    text-align: left;
                    position: relative;
                    margin-left: 1.6rem;
                }
            }
        }

        .submit {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: .88rem;
            line-height: .88rem;
            z-index: 5;
            display: flex;

            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                box-shadow: 0 0 5px 0px #b1b1b1;
                height: 1px;
                width: 100%;
                z-index: 0;
            }

            > div, .el-button {
                flex: 1;
                text-align: center;
                position: relative;
                z-index: 1;
                border-radius: 0 !important;
                border: 0 none;
            }

            .back {
                background-color: #fff;
            }

            .primary {
                color: #fff;
                background-color: #6D97FF;
            }
        }
    }
</style>
